import { useState } from 'react';
import Map from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
import './index.less';
import { Button } from 'antd';

export default function TMap() {
  const [viewState, setViewState] = useState({
    longitude: 120,
    latitude: 30,
    zoom: 3.5,
  });

  // 缩放
  function suofang() {
    setViewState({
      ...viewState,
      zoom: Number(viewState.zoom) + 1,
    });
  }

  return (
    <div className="tMapWrap">
      <Button onClick={suofang}>缩放+1,{viewState.zoom}</Button>
      <Map
        {...viewState}
        onMove={(evt) => setViewState(evt.viewState)}
        style={{ width: '100%', height: 'calc(100vh  - 200px)' }}
        // onZoomEnd={(e: any) => setViewState({ ...viewState, zoom: e.viewState.zoom.toFixed(1) })}
        onZoomEnd={(evt) => setViewState(evt.viewState)}
        mapStyle="https://api.maptiler.com/maps/streets/style.json?key=3EojNgis3jpQesSHthKP"
      ></Map>
    </div>
  );
}
